<template>
  <div class="home-container">
    <van-nav-bar class="page-nav-bar" fixed>
      <template #right>
       <van-button type="info" size="small" round icon="search" class="search-button">搜索</van-button>
      </template>
  </van-nav-bar>
  <van-tabs class="channels-tabs"  v-model:active="active" >
   <!-- <van-tab title="标签1"  >
      <article-list :channel="channel"></article-list>
    </van-tab>-->
      <van-tab v-for="channel in channels" :title="channel.name" :key="channel.id" >
        <article-list :channel="channel"></article-list>
      </van-tab>
     <template #nav-right> 
       <i class="placeholder"></i>
       <van-icon name="wap-nav" class="hamburger-btn" @click="isChannelEditShow = true"></van-icon> 
     </template>
  </van-tabs>
  <van-popup  v-model:show="isChannelEditShow"  close-icon-position="top-left" closeable  position="bottom"  :style="{ height: '100%' }" >
  <channel-edit :my-channels="channels" :active="active" @update-active="onUpdateActive"></channel-edit>
  </van-popup>
  </div>
</template>

<script>
import { reactive, ref,onMounted,toRefs } from 'vue';
import {getUserChannels} from "../../api/user";
import ArticleList from './components/article-list.vue';
import ChannelEdit from "./components/channel-edit.vue";
import{useStore} from "/vuex";
import{getItem} from "../../utils/storage";
function useChannes(){
    const state=reactive({
      channels:[],
      isChannelEditShow:false,
    });
    const loadChannels=async()=>{
      // getUserChannels().then(res=>{
      //   state.channels=res.data;
      // });
      const store=useStore();
      if(store.state.user){
        //用户已经登录
        const awat=getUserChannel();
      }else{
        //没有未登录
        channels=getItem("TOUTIAO_CHANNELS");
        if(channels){
          getUserChannels()
        }
      }
    };
   
    onMounted(()=>{
      loadChannels();
    });
    return {
      state,
    }
}
function useUpdateActive(active,state){
  console.log(22);
  const onUpdateActive=(index,isChannelEditShow=true)=>{
    console.log("父组件")
    active.value=index;
    state.isChannelEditShow=isChannelEditShow;
  }
  return{
    onUpdateActive,
  } 
}
export default {
  components: {
     ArticleList, 
     ChannelEdit,
     },
  setup() {
    const active = ref(0);
    const {state}=useChannes();
    return { 
      active,
      ...toRefs(state),
      ...useUpdateActive(active,state)
      };
  },
};
</script>

<style>
.home-container .search-button{
  width: 300px;
  height: 30px;
  background-color: #5babfb;
  border:none;
  font-size: 18px;
  color: #fff;
}
.channels-tabs .van-tab{
  min-width: 120px;
  border-right: 1px solid #edeff3;
  font-size: 16px;
  color:#777;
}
.channels-tabs .van-tabl--active {
  color:red;
}
.channels-tabs .van-table__line{
  background-color:#3296fa;
  width: 20px;
  height: 6px;
}
.channels-tabs .hamburger-btn{
  /**固定定位 */
  position: fixed;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 66px;
  height: 32px;
  background-color:#fff;
  /**设置透明度 */
  opacity: 0.902;
  /**设置图标大小 */
  font-size: 23px;
}
.channels-tabs .placeholder{
flex-shrink: 0;
  width: 66px;
  height: 32px;
}
.home-container{
  padding-bottom: 100px;
}
.channels-tabs .van-tabs__wrap{
  position: fixed;
  top: 46px;
  left: 0;
  right:0;
  z-index: 1;
}

</style>